<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('projectRevenue.dataReport.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('projectRevenue.dataReport.projectNo')}}</div>
              <el-input class="filter-item" v-model="listQuery.projectCode" clearable :placeholder="$t('placeholder.content')"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('businessObjectives.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable multiple collapse-tags  v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bu" :clearable="true" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('projectRevenue.dataReport.clientName')}}</div>
              <!--<el-autocomplete style="width: 100%" v-model="listQuery.clientName" :fetch-suggestions="getCustomerList" :placeholder="$t('projectRevenue.dataReport.enterCientName')" @select="selectCustomer"></el-autocomplete>-->
              <el-select v-model="listQuery.customerNo" filterable clearable remote reserve-keyword collapse-tags :placeholder="$t('projectRevenue.dataReport.enterCientName')" :remote-method="queryCustomer" :loading="loading"  :no-data-text="$t('public.noData')" :loading-text="$t('public.loading')"> <!--请输入客户简称-->
                <el-option v-for="item in optionsCustomer" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Year</div>
              <dict-select v-model="listQuery.year" code="year" :clearable="true"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{ $t('projectRevenue.dataReport.projectEngineer') }}</div>
              <popover-select selectType="user" @input="setSignersignatory"
                              :placeholder="$t('placeholder.enterNoOrName')"
                              :projectYear=this.listQuery.year
                              valueObjName="ename" v-model="listQuery.peopleName"></popover-select>
              <!--請輸入員編/姓名-->
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">收付款</div>
              <!-- <el-select clearable v-model="listQuery.receiving" @change="changeBg" :placeholder="$t('placeholder.choose')"> -->
              <el-select clearable v-model="listQuery.receiving" >
                <el-option v-for="item in receivingList" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('projectRevenue.dataReport.endCaseDate')}}</div> <!--204结案日-->
              <div style="display: flex">
                <dict-select :class="{'wid':listQuery.hasPoNo === '1'}" v-model="listQuery.caseEnd" code="practicalFinishDate" :clearable="true"></dict-select>
                <!--<el-input v-if="listQuery.caseEnd === '1'" v-model="listQuery.caseEnd" :placeholder="$t('scheduleManager.progressList.commonEnterPlaceHolder')" clearable class="filter-item"></el-input> &lt;!&ndash;请输入&ndash;&gt;-->
              </div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list" style="padding-bottom: 20px;" v-loading="loading" :element-loading-text="$t('projectRevenue.dataReport.loading')" element-loading-spinner="el-icon-loading">
      <div class="yt-list-title">
        <span>{{$t('projectRevenue.dataReport.listTile')}}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <div class="yt-btn yt-btn-ys" v-if="projectDataEdit" type="primary" @click="update">{{$t('button.change')}}</div>
          <div class="yt-btn yt-btn-ys" v-if="projectDataEdit" type="primary" @click="editData">{{$t('button.save')}}</div>
          <div class="yt-btn yt-btn-ys" v-if="projectDataEdit" type="primary" @click="updateAbilityCost">{{$t('button.save1')}}</div>
          <div class="yt-btn yt-btn-ys" type="primary" @click="handleRemit">{{$t('button.export')}}</div>
          <div class="yt-btn yt-ml8" type="primary" @click="setUp">{{$t('button.sets')}}</div>
        </div>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" v-if="displayBlockNameListFla === '1'" border class="yt-table" @selection-change="handleSelectionChange" style="width: 100%" max-height="600" :cell-style="{padding:'5px 0px'}">
          <!-- <el-table-column type="index" align="center" :label="$t('projectRevenue.dataReport.serialNum')" min-width="60"/> -->

            <el-table-column align="center" label="Sum" width="120" fixed>
              <el-table-column type="selection" align="center" class-name="pd" prop="id" width="60"/>
              <el-table-column type="index" align="center" :label=" $t('project.serialNumber')" class-name="pd" width="60"></el-table-column>
            </el-table-column>

          <el-table-column align="center" :label="$t('projectRevenue.dataReport.endCaseDate')" prop="endCaseDate" v-if="displayBlockNameStr['endCaseDate']"
                           min-width="110" :show-overflow-tooltip="true" fixed sortable/>
          <el-table-column align="center" label="Year" prop="year" v-if="displayBlockNameStr['year']" min-width="110" :show-overflow-tooltip="true" fixed sortable/>

         
         <!-- <el-table-column align="center" label="" v-if="displayBlockNameStr['projectType']">
            <el-table-column align="center" label="Type" prop="projectType" v-if="displayBlockNameStr['projectType']"
                             min-width="110" :show-overflow-tooltip="true" />
          </el-table-column> -->

         
          <el-table-column align="center" v-if="displayBlockNameStr['pastYearIncome']" :label="resultTotal.pastYearIncome">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.pastYearIncome')" v-if="displayBlockNameStr['pastYearIncome']"
                             min-width="160" :show-overflow-tooltip="true" fixed sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.pastYearIncome }}</div>
              </template>
            </el-table-column>
          </el-table-column>

        

          <el-table-column align="center" v-if="displayBlockNameStr['pastYearCost']" :label="resultTotal.pastYearCost">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.pastYearCost')" v-if="displayBlockNameStr['pastYearCost']"
                             min-width="160" :show-overflow-tooltip="true" fixed sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.pastYearCost }}</div>
              </template>
            </el-table-column>
          </el-table-column>

      
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.projectNo')" prop="projectNo" v-if="displayBlockNameStr['projectNo']"
                           min-width="110" :show-overflow-tooltip="true" fixed sortable/>
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.projectName')" prop="projectName" v-if="displayBlockNameStr['projectName']"
                           min-width="200" :show-overflow-tooltip="true" fixed sortable/>
          <el-table-column align="center" label="" v-if="displayBlockNameStr['customerName']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.clientName')" prop="customerName" v-if="displayBlockNameStr['customerName']"
                             min-width="110" :show-overflow-tooltip="true" />
          </el-table-column>

         



          <el-table-column align="center" :label="resultTotal.contractIncome" v-if="displayBlockNameStr['contractIncome']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.contractIncome')" v-if="displayBlockNameStr['contractIncome']"
                             min-width="110" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractIncome }}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.contractCost" v-if="displayBlockNameStr['contractCost']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.contractCost')" v-if="displayBlockNameStr['contractCost']"
                             min-width="110" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractCost }}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="" v-if="displayBlockNameStr['contractIncomePercentage']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.contractIncomePercentage')" v-if="displayBlockNameStr['contractIncomePercentage']"
                             min-width="140" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div >{{scope.row.contractIncomePercentage}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.contractGrossProfit" v-if="displayBlockNameStr['contractGrossProfit']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.contractGrossProfit')" prop="contractGrossProfit" v-if="displayBlockNameStr['contractGrossProfit']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="" v-if="displayBlockNameStr['identifyType']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.identifyType')" prop="identifyType" v-if="displayBlockNameStr['identifyType']"
                             min-width="100" :show-overflow-tooltip="true" sortable/>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumIdentifyIncome" v-if="displayBlockNameStr['sumIdentifyIncome']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumIdentifyIncome')" v-if="displayBlockNameStr['sumIdentifyIncome']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumIdentifyIncome}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumIdentifyCost" v-if="displayBlockNameStr['sumIdentifyCost']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumIdentifyCost')" v-if="displayBlockNameStr['sumIdentifyCost']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumIdentifyCost}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumIdentifyProfit" v-if="displayBlockNameStr['sumIdentifyProfit']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumIdentifyProfit')" prop="sumIdentifyProfit" v-if="displayBlockNameStr['sumIdentifyProfit']"
                             min-width="170" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumIdentifyProfit}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.recognizedIncome" v-if="displayBlockNameStr['recognizedIncome']">
            <el-table-column align="center" label="合約收入 （本年度）" prop="recognizedIncome" v-if="displayBlockNameStr['recognizedIncome']"
                             min-width="100" :show-overflow-tooltip="true" :render-header="renderHeader1" sortable>
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.recognizedIncome"></el-input>
                  <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ scope.row.recognizedIncome }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.recognizedCost" v-if="displayBlockNameStr['recognizedCost']">
            <el-table-column align="center" label="合約成本 （本年度）" prop="recognizedCost" v-if="displayBlockNameStr['recognizedCost']"
                             min-width="100" :show-overflow-tooltip="true" :render-header="renderHeader1" sortable>
              <template slot-scope="scope">
                  <div v-check-submit tabindex="0">
                    <el-input style="display: none" type="number" size="small" v-model="scope.row.recognizedCost"></el-input>
                    <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ scope.row.recognizedCost }}</div>
                  </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.contractGrossProfit4Year" v-if="displayBlockNameStr['contractGrossProfit4Year']">
            <el-table-column align="center" label="合約毛利 （本年度）" v-if="displayBlockNameStr['contractGrossProfit4Year']"
                             min-width="100" :show-overflow-tooltip="true" :render-header="renderHeader1" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit4Year}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.recognizedIncomeNextYear" v-if="displayBlockNameStr['recognizedIncomeNextYear']">
            <el-table-column align="center" label="合約收入 （明年度）" :render-header="renderHeader1"
                             prop="recognizedIncomeNextYear" v-if="displayBlockNameStr['recognizedIncomeNextYear']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.recognizedIncomeNextYear"></el-input>
                  <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ scope.row.recognizedIncomeNextYear }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.recognizedCostNextYear" v-if="displayBlockNameStr['recognizedCostNextYear']">
            <el-table-column align="center" label="合約成本 （明年度）" :render-header="renderHeader1"
                             prop="recognizedCostNextYear" v-if="displayBlockNameStr['recognizedCostNextYear']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <el-input style="display: none" type="number" size="small" v-model="scope.row.recognizedCostNextYear"></el-input>
                  <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ scope.row.recognizedCostNextYear }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.contractGrossProfitNextYear" v-if="displayBlockNameStr['contractGrossProfitNextYear']">
            <el-table-column align="center" label="合約毛利 （明年度）" :render-header="renderHeader1"
                             prop="contractGrossProfitNextYear" v-if="displayBlockNameStr['contractGrossProfitNextYear']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitNextYear}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <!--預估應收累計-->
          <el-table-column align="center" :label="resultTotal.expectRequestCount" v-if="displayBlockNameStr['expectRequestCount']">
            <el-table-column align="center" label="預估應收累計" prop="expectRequestCount" v-if="displayBlockNameStr['expectRequestCount']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.expectRequestCount}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumReceivableRequestFunds" v-if="displayBlockNameStr['sumReceivableRequestFunds']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumReceivableRequestFunds')"
                             prop="sumReceivableRequestFunds" v-if="displayBlockNameStr['sumReceivableRequestFunds']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumReceivableRequestFunds}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumReceivablesFunds" v-if="displayBlockNameStr['sumReceivablesFunds']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumReceivablesFunds')"
                             prop="sumReceivablesFunds" v-if="displayBlockNameStr['sumReceivablesFunds']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumReceivablesFunds}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <!--預估應收達成%-->
          <el-table-column align="center" label="" v-if="displayBlockNameStr['expectRequestPer']">
            <el-table-column align="center" label="預估應收達成%" prop="expectRequestPer"
                             v-if="displayBlockNameStr['expectRequestPer']"
                             min-width="140" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div>{{scope.row.expectRequestPer}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <!--預估應付累計-->
          <el-table-column align="center" :label="resultTotal.expectPayCount" v-if="displayBlockNameStr['expectPayCount']">
            <el-table-column align="center" label="預估應付累計" prop="expectPayCount"
                             v-if="displayBlockNameStr['expectPayCount']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.expectPayCount}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumPayableRequestFunds" v-if="displayBlockNameStr['sumPayableRequestFunds']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumPayableRequestFunds')"
                             prop="sumPayableRequestFunds" v-if="displayBlockNameStr['sumPayableRequestFunds']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumPayableRequestFunds}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.sumPaymentFunds" v-if="displayBlockNameStr['sumPaymentFunds']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.sumPaymentFunds')"
                             prop="sumPaymentFunds" v-if="displayBlockNameStr['sumPaymentFunds']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumPaymentFunds}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <!--預估應付達成%-->
          <el-table-column align="center" label="預估應付達成%"
                           prop="expectPayPer" v-if="displayBlockNameStr['expectPayPer']"
                           min-width="140" :show-overflow-tooltip="true" sortable>
            <template slot-scope="scope">
              <div>{{scope.row.expectPayPer}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.isIdentifySettle')" prop="isIdentifySettle" v-if="displayBlockNameStr['isIdentifySettle']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.isPaymentReceived')" prop="isPaymentReceived" v-if="displayBlockNameStr['isPaymentReceived']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.projectEngineer')" prop="projectEngineer" v-if="displayBlockNameStr['dataReport']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.erpBuNo')" prop="erpBuNo" v-if="displayBlockNameStr['erpBuNo']" min-width="100" :show-overflow-tooltip="true" sortable/>
          <el-table-column align="center" label="Account" prop="bu" v-if="displayBlockNameStr['bu']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <!-- 预计开工日 -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.expectedStartDate')" prop="expectedStartDate" v-if="displayBlockNameStr['expectedStartDate']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <!-- 预计完工日 -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.estimatedCompletionDate')" prop="estimatedCompletionDate" v-if="displayBlockNameStr['estimatedCompletionDate']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <!-- 验收日期 -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.acceptanceDate')" prop="acceptanceDate" v-if="displayBlockNameStr['acceptanceDate']" min-width="130" :show-overflow-tooltip="true" sortable/>
          <!-- 类型 -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.type')" prop="type" v-if="displayBlockNameStr['type']" min-width="100" :show-overflow-tooltip="true" sortable/>
          <!-- 累积完工收入 -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.completionIncomeCount')"
                           prop="completionIncomeCount" v-if="displayBlockNameStr['completionIncomeCount']"
                           min-width="130" :show-overflow-tooltip="true" sortable>
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completionIncomeCount}}</div>
            </template>
          </el-table-column>
          <!-- 累积完工成本(含能赚) -->
          <el-table-column align="center" :label="resultTotal.completionCostCount" v-if="displayBlockNameStr['completionCostCount']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.completionCostCount')"
                             prop="completionCostCount" v-if="displayBlockNameStr['completionCostCount']"
                             min-width="210" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionCostCount}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.projectAbilityCost" v-if="displayBlockNameStr['projectAbilityCost']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.projectAbilityCost')"
                             prop="projectAbilityCost" v-if="displayBlockNameStr['projectAbilityCost']"
                             min-width="100" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-check-submit tabindex="0">
                  <!--@blur="addProjectAbilityCost(scope.$index)"-->
                  <el-input style="display: none" type="number"  size="small" v-model="scope.row.projectAbilityCost"></el-input>
                  <div class="box" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{ scope.row.projectAbilityCost }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <!--能专成本(以前年度)-->
          <el-table-column align="center" :label="resultTotal.projectAbilityCostPastYear" v-if="displayBlockNameStr['projectAbilityCostPastYear']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.projectAbilityCostPastYear')"
                             prop="projectAbilityCostPastYear" v-if="displayBlockNameStr['projectAbilityCostPastYear']"
                             min-width="200" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.projectAbilityCostPastYear}}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 完工收入(本年度) -->
          <el-table-column align="center" :label="resultTotal.completionIncomeCountSubtractPast" v-if="displayBlockNameStr['completionIncomeCountSubtractPast']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.completionIncomeCountSubtractPast')"
                             prop="completionIncomeCountSubtractPast" v-if="displayBlockNameStr['completionIncomeCountSubtractPast']"
                             min-width="170" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionIncomeCountSubtractPast}}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 完工成本(本年度) -->
          <el-table-column align="center" :label="resultTotal.completionCostCountSubtractPast" v-if="displayBlockNameStr['completionCostCountSubtractPast']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.completionCostCountSubtractPast')"
                             prop="completionCostCountSubtractPast" v-if="displayBlockNameStr['completionCostCountSubtractPast']"
                             min-width="170" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionCostCountSubtractPast}}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 完工毛利(本年度) -->
          <el-table-column align="center" :label="resultTotal.completionProfitSubtractPast" v-if="displayBlockNameStr['completionProfitSubtractPast']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.completionProfitSubtractPast')"
                             prop="completionProfitSubtractPast" v-if="displayBlockNameStr['completionProfitSubtractPast']"
                             min-width="170" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionProfitSubtractPast}}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 完工%(本年度) -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.completionPercentage4Year')"
                           prop="completionPercentage4Year" v-if="displayBlockNameStr['completionPercentage4Year']"
                           min-width="170" :show-overflow-tooltip="true" sortable>
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completionPercentage4Year}}</div>
            </template>
          </el-table-column>
          <!-- 完工% -->
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.estimatedCompletionPercentage')"
                           prop="estimatedCompletionPercentage" v-if="displayBlockNameStr['estimatedCompletionPercentage']"
                           min-width="100" :show-overflow-tooltip="true" sortable/>
          <el-table-column align="center" :label="$t('projectRevenue.dataReport.isFinish')"
                           prop="isFinish" v-if="displayBlockNameStr['isFinish']"
                           min-width="100" :show-overflow-tooltip="true" sortable/>

          <el-table-column align="center" :label="resultTotal.workingHoursCount" v-if="displayBlockNameStr['workingHoursCount']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.workingHoursCount')"
                             prop="workingHoursCount" v-if="displayBlockNameStr['workingHoursCount']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.projectLaborCost" v-if="displayBlockNameStr['projectLaborCost']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.projectLaborCost')"
                             prop="projectLaborCost" v-if="displayBlockNameStr['projectLaborCost']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.projectLaborCost}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" :label="resultTotal.manageLaborCost" v-if="displayBlockNameStr['manageLaborCost']">
            <el-table-column align="center" :label="$t('projectRevenue.dataReport.manageLaborCost')"
                             prop="manageLaborCost" v-if="displayBlockNameStr['manageLaborCost']"
                             min-width="130" :show-overflow-tooltip="true" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.manageLaborCost}}</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div v-if="displayBlockNameListFla === '0'">
          <el-tag type="warning"><i class="el-icon-warning"></i>{{$t('projectRevenue.dataReport.setMenu')}}</el-tag>
        </div>
      </div>
      <!--设置的可见栏位-->
      <el-dialog :title="$t('projectRevenue.dataReport.setVisible')" :visible.sync="TableTitleVisible">
        <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList ="displayBlockNameList" @cancel="cancel"></yt-table-title>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getDeptByBuAndCountry } from '@/api/bu/index';
  import customerReq from '@/api/customer';
  import { getData, updateRecognized, editRecognized, queryDisplayBlock, updateProjectAbilityCost } from '@/api/pmoReport/projectRevenue';
  import YtTableTitle from '@/components/yt-table-title/index';
  import mixins from '@/mixins/yt-table-title';
  import dictSelect from '@/components/Dict/dictValueSelect';
  import popoverSelect from '@/components/popover-select/index.vue';
  import { mapGetters } from 'vuex';
  export default {
    name: 'dataReport',
    mixins: [mixins],
    components: {
      dictSelect,
      YtTableTitle,
      popoverSelect,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        blockNameCode: 'dataReport',
        listQuery: {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          year: '',
          projectCode: '',
          customerNo: '',
          country: '',
          caseEnd: '',
          peopleName: '',
          peopleId: '',
          receiving: ''
        },
        selectionList: [],
        resultTotal: {},
        displayBlockNameStr: {},
        list: [],
        buList: [],
        bgList: [],
        optionsCustomer: [],
        projectDataEdit: false,
        total: 0,
        loading: false,
        dictDialogVisible: false,
        TableTitleVisible: false,
        receivingList: [{
          name: '完成',
          value: '1'
        }, {
          name: '未完成',
          value: '0'
        }]
      };
    },
    mounted() {
      this.projectDataEdit = this.elements['projectData.edit']
      this.getQuery()
      this.getBg()
      this.getColumn();
      if (this.listQuery.bu.length > 0 || this.listQuery.bg !== '' || this.listQuery.clientName !== '' || this.listQuery.year !== '' || this.listQuery.customerNo !== '') {
        this.getData();
      }
    },
    computed: {
      ...mapGetters(['elements'])
    },
    methods: {
      // 给完工成本加上能专成本
      addProjectAbilityCost(index) {
        if (this.list.length > index) {
          const num = Number.parseInt(this.list[index].projectAbilityCost)
          this.list[index].completionCostCount = this.list[index].completionCostCount + Number.isFinite(num) ? num : 0
        }
      },
      renderHeader1(h, { column }) {
        const header = column.label.split(' ');
        return [h('p', [
          h('p', {}, header[0]),
          h('p', {}, header[1]),
          h('span', {}, header[2])
        ])];
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      setSignersignatory(val, item) {
        this.listQuery.peopleId = item.id
        this.listQuery.peopleName = item.ename
      },
      queryCustomer(query) {
        this.loading = true;
        customerReq.pageClient({ clientName: query }).then(res => {
          this.loading = false;
          this.optionsCustomer = res.data.rows.map(item => ({ value: item.customerNo, label: item.customerShortName }));
        });
      },
      getQuery() {
        const dataReportListQuery = window.sessionStorage.getItem('dataReportListQuery');
        if (dataReportListQuery) {
          this.listQuery = JSON.parse(dataReportListQuery);
        }
      },
      // 获取初始的栏位
      getColumn() {
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinColumn(data)
      },
      getMixinColumn(data) {
        this.displayBlockNameStr = {}
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            if (res.data.length > 0) {
              this.displayBlockNameListFla = '1'
            } else {
              this.displayBlockNameListFla = '0'
            }
            this.displayBlockNameList = res.data
            for (const i in this.displayBlockNameList) {
              this.displayBlockNameStr[this.displayBlockNameList[i]] = true
            }
            console.log(this.displayBlockNameStr, 'iii')
          }
        })
      },
      // 获取弹框的栏位
      setUp() {
        // 设置
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinDialogColumn(data)
      },
      editData() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('scheduleManager.progressList.fail'),
            message: this.selectionList.length <= 0 ? this.$t('scheduleManager.progressList.updateTipsOne') : this.$t('scheduleManager.progressList.updateTipsTwo'), // '您还未选择' : '您只能选择一条数据进行编辑修改'
            type: 'warning'
          });
          return;
        }

        editRecognized(this.selectionList).then(() => {
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.updateSuccess'),
            type: 'success',
            duration: 2000
          });

          this.getData();
        });
      },
      update() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('scheduleManager.progressList.fail'),
            message: this.selectionList.length <= 0 ? this.$t('scheduleManager.progressList.updateTipsOne') : this.$t('scheduleManager.progressList.updateTipsTwo'), // '您还未选择' : '您只能选择一条数据进行编辑修改'
            type: 'warning'
          });
          return;
        }

        this.$confirm(this.$t('tips.permanentUpdate'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        })
          .then(() => {
            updateRecognized(this.selectionList).then(() => {
              this.$notify({
                title: this.$t('tips.success'),
                message: this.$t('tips.updateSuccess'),
                type: 'success',
                duration: 2000
              });

              this.getData();
            });
          });
      },
      updateAbilityCost() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('scheduleManager.progressList.fail'),
            message: this.selectionList.length <= 0 ? this.$t('scheduleManager.progressList.updateTipsOne') : this.$t('scheduleManager.progressList.updateTipsTwo'), // '您还未选择' : '您只能选择一条数据进行编辑修改'
            type: 'warning'
          });
          return;
        }

        this.$confirm(this.$t('tips.permanentUpdate'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        })
          .then(() => {
            updateProjectAbilityCost(this.selectionList).then(() => {
              this.$notify({
                title: this.$t('tips.success'),
                message: this.$t('tips.updateSuccess'),
                type: 'success',
                duration: 2000
              });

              this.getData();
            });
          });
      },
      getData() {
        if (!this.listQuery.year) {
          this.$message.error(this.$t('placeholder.enterYear'));
          return
        }
        
        this.loading = true
        getData(this.listQuery).then(res => {
          this.list = res.data.resultSet.data.rows
          this.resultTotal = res.data.total
          this.loading = false
          Object.keys(this.resultTotal).forEach(key => {
            this.resultTotal[key] = String(this.resultTotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
          })
        });
      },
      cancel(val) {
        if (val) {
          this.getColumn();
        }
        this.TableTitleVisible = false
        console.log(this.displayBlockNameStr, '1111111111')
      },
      handleRemit() {
        const str = '?bg=' + this.listQuery.bg + '&bu=' + this.listQuery.bu + '&customerNo=' + this.listQuery.customerNo + '&year=' + this.listQuery.year + '&userId=' + this.$store.getters.info.id;

        const a = document.createElement('a');
        const href = '/api/admin/excel/exportDataReport' + str;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      selectCustomer(item) {
        this.listQuery.customerNo = item.customerNo;
      },
      getCustomerList(queryString, cb) {
        customerReq.pageClient({ clientName: queryString }).then(res => {
          const customerList = res.data.rows;
          if (res.data.rows.length === 0) {
            this.client = ''
          }
          for (let i = 0; i < customerList.length; i++) {
            customerList[i].value = customerList[i].customerShortName;
          }
          cb(customerList);
        });
      },
      setBg(country) {
        this.listQuery.bu = []
        this.listQuery.bg = ''
        if (country) {
          const bgSet = []
          if (this.listQuery.bg !== '') {
            bgSet.push(this.listQuery.bg)
          }
          const param = {}
          param.country = country
          param.bg = bgSet
          param.bu = this.listQuery.bu
          getDeptByBuAndCountry(param).then(res => {
            this.bgList = res.data.bgList
            this.buList = res.data.buList
          })
        } else {
          this.getBg()
        }
      },
      getBg() {
        getDeptByBuAndCountry({}).then(res => {
          if (res) {
            this.buList = res.data.buList
            this.bgList = res.data.bgList
          }
        })
      },
      changeBg(row) {
        this.listQuery.bu = []
        // const bgSet = []
        // if (row !== '') {
        //   bgSet.push(row)
        // }
        const param = {}
        param.country = this.listQuery.country
        param.bg = row
        param.bu = []
        getDeptByBuAndCountry(param).then(res => {
          this.buList = res.data.buList
        })
      },
      changeBu(row) {
        if (row.length === 0) {
          this.listQuery.bu = []
        }
      },
      handleFilter() {
        this.getData();
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          year: '',
          customerNo: '',
          country: '',
          caseEnd: ''
        };
        this.getData();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getData();
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('dataReportListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
  .box{
    /* border: 1px solid #d9d9d9; */
    padding: 0 15px !important;
    height: 15px;
    line-height: 15px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    cursor:text;
    font-size: 12px;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 14px;
  }


  /* .btn {
    margin-left: 12px;
  } */
  /* .box{
    padding: 0 15px !important;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    color: #333;
  } */

</style>
